<template>
	<view>
		<view v-if="showPopup" class="uni-popup" :style="{top:state.isNativeHead?'':state.StatusBar}">
			<view :class="['top', 'uni-top','ani']" class="uni-custom uni-popup__wrapper">
				<view class="uni-popup__wrapper-box">
					<view class="title">{{state.authList[permissionID].title}}</view>
					<view class="content">{{state.authList[permissionID].content}}</view>
				</view>
			</view>
		</view>
		<view class="lose-box ss-flex justify-center align-center"
			:style="{bottom:state.isNativeHead?'':state.placeholderHeight}" v-if="bottomShow">
			<view class="lose ss-flex justify-between align-center ss-p-x-30">
				<view>
					<view class="ss-font-32">{{state.authList[bottomId].lose_title}}</view>
					<view class="ss-font-20">{{state.authList[bottomId].lose_content}}</view>
				</view>
				<view class="right ss-flex">
					<view class="open text-center ss-font-32 ss-m-r-30" @click="openLose">去开启</view>
					
					<!-- #ifndef APP -->
						<uni-icons type="closeempty" size="20" color="#fff" @click="closeLose"></uni-icons>
					<!-- #endif -->					
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import sheep from '@/sheep';
	import {
		computed,
		reactive,
		onMounted
	} from 'vue';
	import {
		showAuditModal
	} from '@/sheep/hooks/useAudit.js'
	import {
		findArea
	} from '@/sheep/helper';
	
	

	const state = reactive({
		isNativeHead: false,
		StatusBar: '',
		placeholderHeight: '',
		authList: {
			'WRITE_EXTERNAL_STORAGE': {
				title: "杭州宠爱有佳科技有限公司对存储空间/照片权限申请说明",
				content: "便于您使用该功能上传您的照片/图片/视频及用于更换头像、意见反馈、保存相册、发布商品/分享、下载与客服沟通等场景中读取和写入相册和文件内容。",
				lose_title: "存储空间服务未开启",
				lose_content: ""
			},
			'ACCESS_FINE_LOCATION': {
				title: "杭州宠爱有佳科技有限公司对地理位置权限申请说明",
				content: "便于应用程序可以提供基于位置的服务、定位导航、附近搜索等功能。",
				lose_title: "定位服务未开启",
				lose_content: "开启后才可以看到附近推荐的设备哦"
			},
			'CAMERA': {
				title: "杭州宠爱有佳科技有限公司对相机/摄像头权限申请说明",
				content: "便于您使用该功能拍照上传您的照片/视频及用于更换头像、意见反馈、保存相册、发布商品/动态、下载与客服沟通等场景中使用",
				lose_title: "相机服务未开启",
				lose_content: ""
			},
			'RECORD_AUDIO': {
				title: "杭州宠爱有佳科技有限公司对麦克风权限申请说明",
				content: "便于您使用该功能进行录音、语音通话、发布语音、与客服语音沟通等场景中使用",
				lose_title: "麦克风服务未开启",
				lose_content: ""
			},
			'CALL_PHONE': {
				title: "杭州宠爱有佳科技有限公司对拨打/管理电话权限申请说明",
				content: "便于您使用该功能联系买家、骑手或者客服、业务经理与联系等场景下使用",
				lose_title: "电话服务未开启",
				lose_content: ""
			},
			"WRITE_EXTERNAL_STORAGE,CAMERA": {
				title: "杭州宠爱有佳科技有限公司对相机/摄像头权限和存储空间/照片权限申请说明",
				content: "相机/摄像头权限便于您使用该功能联系买家、骑手或者客服、业务经理与联系等场景下使用,存储空间/照片权限便于您使用该功能上传您的照片/图片/视频及用于更换头像、意见反馈、保存相册、发布商品/分享、下载与客服沟通等场景中读取和写入相册和文件内容。",
				lose_title: "相机/存储服务未开启",
				lose_content: ""
			},
			"CAMERA,RECORD_AUDIO": {
				title: "杭州宠爱有佳科技有限公司对相机/摄像头和录音权限申请说明",
				content: "相机/摄像头权限便于您使用人脸核身等场景下使用,录音权限便于您使用人脸核身等场景下使用。",
				lose_title: "相机/录音服务未开启",
				lose_content: ""
			},
			"ACCESS_NETWORK_STATE":{
				title: "杭州宠爱有佳科技有限公司对获取网络状态权限申请说明",
				content: "获取网络状态便于系统在您设备无网络时给出提示。",
				lose_title: "获取网络状态服务未开启",
				lose_content: ""
			},
		}
	})

	// 是否显示弹窗
	const showPopup = computed(() => sheep.$store('permission').showPopup)

	// 权限id
	const permissionID = computed(() => sheep.$store('permission').permissionID)

	const bottomId = computed(() => sheep.$store('permission').bottomId)

	const bottomShow = computed(() => sheep.$store('permission').bottomShow)

	onMounted(() => {
		// #ifdef APP-PLUS
		getSystemInfo();
		// #endif
	})

	function closeLose() {
		sheep.$store('permission').$patch((state) => {
			state.bottomShow = false;
		});
	}

	async function openLose() {
		let {
			latitude,
			longitude
		} = await sheep.$store('location').getLocation()
		
		console.log('openLose---lat:',latitude);
	}

	function getBottomHeight() {
		// #ifndef APP-NVUE
		const query = uni.createSelectorQuery()
		query.select('.u-tabbar__content').fields({
			rect: true,
			size: true,
		}, res => {
			console.log(res)
			if (res) {
				state.placeholderHeight = res.height + 'px'
			} else {
				state.placeholderHeight = 70 + 'px'
			}
		}).exec()
		// #endif
	}
	//获取状态栏高度
	function getSystemInfo() {
		const info = uni.getSystemInfoSync()
		state.StatusBar = (info.statusBarHeight + sheep.$platform.device.statusBarHeight + 27) +
			'px'; //用于自定义头部时，给手机状态栏留出位置,可通过isNativeHead这个参数控制
		if (info.platform.toLowerCase() === 'ios') {
			state.placeholderHeight = (info.safeAreaInsets.bottom + 70) + 'px'
		} else {
			state.placeholderHeight = '70px'
		}
	}
</script>
<style lang="scss" scoped>
	.uni-popup {
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 9999;
		overflow: hidden;

		&__wrapper {
			position: absolute;
			z-index: 9999;
			/* #ifndef APP-NVUE */
			box-sizing: border-box;

			/* #endif */
			&.ani {
				/* #ifndef APP-NVUE */
				transition: all 0.3s;
				/* #endif */
			}

			&.top {
				top: 0;
				width: 705rpx;
				/* #ifdef APP-NVUE */
				left: 22.5rpx;
				/* #endif */
				/* #ifndef APP-NVUE */
				left: 0;
				transform: translateY(-705rpx);
				/* #endif */
			}

			&-box {
				position: relative;
				/* #ifndef APP-NVUE */
				box-sizing: border-box;
				/* #endif */
			}

			&.uni-custom {
				& .uni-popup__wrapper-box {
					width: 705rpx;
					/* #ifndef APP-NVUE */
					margin: 0 22.5rpx;
					/* #endif */
					padding: 30upx;
					background: #fff;
					border: solid 2rpx #ddd;
					/* #ifndef APP-NVUE */
					box-sizing: border-box;
					/* #endif */
					border-radius: 16rpx;

					.title {
						font-size: 32rpx;
						font-weight: bold;
					}

					.content {
						margin-top: 16rpx;
						line-height: 1.6;
					}
				}

				&.top {
					& .uni-popup__wrapper-box {
						width: 705rpx;
					}
				}
			}

			&.uni-top {
				transform: translateY(0);
			}
		}
	}

	.lose-box {
		width: 100%;
		height: 134rpx;
		position: fixed;
		left: 0;
		z-index: 999;

		.lose {
			width: 710rpx;
			height: 114rpx;
			border-radius: 10rpx;
			background: rgba(0, 0, 0, 0.6);
			color: #fff;
			box-sizing: border-box;

			.right {

				.open {
					width: 118rpx;
					height: 60rpx;
					border-radius: 10rpx;
					line-height: 60rpx;
					background: linear-gradient(270deg, #F9782C 0%, #FFA26B 100%);

				}
			}
		}
	}
</style>